//out:../css/
*{
    margin: 0;
    padding: 0;
    font-family: 'pingfang sc' 'source han sans cn' 'microsoft yahei' monospace;
    text-decoration: none;
}

// 定义变量
:root{
    --backcolor:#50577A;
    --navcolor:#6B728E;
    --textcolor:#000;
    --svgcolor:#fff;
    --aboutcolor:#000;
    --buttoncolor:#3F3B6C;
}

:root[theme='dark']{
    --backcolor:#3A3845;
    --navcolor:#3C4048;
    --textcolor:#fff;
    --svgcolor:#fff;
    --aboutcolor:#fff;
    --buttoncolor:#926767;
}

// 头部导航栏
header{
    height: 60px;
    background-color: var(--navcolor);
    padding: 0 10vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .brand{
        flex-grow: 2;

        img{
            width: 45px;
            height: 45px;
            object-fit: cover;
            border-radius: 50%;
            cursor: pointer;
        }
    }

    .nav{
        display: flex;
        flex-grow: 1;
        justify-content: space-between;
        text-transform: uppercase;
        font-weight: 500;

        &>div{
            cursor: pointer;
            flex-grow: 1;
            text-align: center;
            line-height: 60px;
            user-select: none;
            color: var(--textcolor);

            &:hover{
                color: #E26868;
            }
        }

        // 主题样式
        .theme{
            display: flex;
            justify-content: center;
            align-items: center;

            .button{
                height: 26px;
                width: 26px;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                svg{
                    width: 26px;
                    height: 26px;
                    flex-shrink: 0;
                    transition: transform 1s;
                    fill: var(--svgcolor);
                }
                &>:nth-child(2){
                    margin-top: 26px;
                    fill: var(--svgcolor);
                }
            }   

            &:hover{
                .button{
                    svg{
                        fill: #E26868;
                    }
                    &>:nth-child(2){
                        fill: #E26868;
                    }
                }
            }
        }
        // 主题激活样式
        .theme.themeActive{
            .button{
                :nth-child(1){
                    transform: translateY(52px);
                }
                :nth-child(2){
                    transform: translateY(-52px);
                }
            }
        }

        // 语言样式
        .language{
            display: flex;
            justify-content: center;
            align-items: center;

                svg{
                    height: 26px;
                    width: 26px;
                    fill: var(--svgcolor);
                    transition: transform 0.5s;
                }
            &:hover{
                svg{
                    fill: #E26868;
                }
            }
        }
        // 语言激活样式
        .language.langActive{
                svg{
                    transform: rotateY(180deg);
                }
        }

        // 退出登录
        :nth-child(6){
            display: flex;
            justify-content: center;
            align-items: center;

            svg{
                height: 26px;
                width: 26px;
                fill: var(--svgcolor);
                transition: transform 0.5s;
            }

            &:hover{
                svg{
                    fill: #E26868;
                }
            }
        }
    }

    .navButton{
        cursor: pointer;
        width: 40px;
        height: 40px;
        border: solid 3px var(--buttoncolor);
        border-radius: 5px;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        right: 10vw;
        padding: 2px;
        box-sizing: border-box;
        display: none;

        div{
            width: 30px;
            height: 4px;
            background-color: var(--buttoncolor);
            border-radius: 2px;
            position: absolute;
            transition: all .5s;
            left: 50%;
            margin-left: -15px;
            top: 50%;
            margin-top: -2px;
        }

        .lineOne{
            transform: translateY(-8px);
        }
        .lineThree{
            transform: translateY(8px);
        }
    }
    
}

// 中间内容区(使用原生路由)
main{
    overflow: hidden;
    padding: 0 10vw;
    background-color: var(--backcolor);
    // 介绍样式
    .introduce{
        overflow: hidden;
        text-align: center;
        color:var(--textcolor);
        :nth-child(1){
            margin-top: 100px;
            font-size: 50px;
        }
        :nth-child(2){
            font-size: 50px;
        }
        :nth-child(3){
            margin-top: 90px;
            margin-bottom: 100px;
            font-size: 20px;
        }
    }
    // 第九艺术
    .ninth{
        font-size: 30px;
        text-align: center;
        font-weight: 600;
        background-color: var(--navcolor);
        padding: 20px 0;
        margin-bottom: 10px;
        color: var(--textcolor);
    }
    // 只狼样式
    .sekiro{
        height: 500px;
        background-image: url(../img/home/sekiro.png);
        background-size: cover;
        background-position: center;
        overflow: hidden;

        h3{
            margin-top: 100px;
            text-align: center;
            font-size: 30px;
            color: #222;
        }

        .button{
            height: 50px;
            width: 150px;
            border-radius: 5px;
            margin-top: 250px;
            margin-right: 100px;
            margin-left: auto;
            text-align: center;
            background-color: #624F82;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            user-select: none;
            cursor: pointer;
            position: relative;
            svg{
                width: 25px;
                height: 25px;
                position: relative;
                z-index: 1;
            }
            span{
                position: relative;
                z-index: 1;
            }
            &:hover{
                svg{
                    animation: sekiro 1s infinite linear;
                }
            }

            &:hover::after{
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after{
                content: '';
                display: block;
                background-color: #3F3B6C;
                position: absolute;
                width: 0%;
                height: 0%;
                top: 50%;
                left: 50%;
                border-radius: 5px;
                z-index: 0;
                transition: all 0.5s;
            }
        }
    }
    // 动漫
    .anime{
        font-size: 30px;
        text-align: center;
        font-weight: 600;
        background-color: var(--navcolor);
        padding: 20px 0;
        margin-bottom: 10px;
        margin-top: 150px;
        color: var(--textcolor);
    }
    // 巨人
    .AOT{
        height: 500px;
        background-image: url(../img/home/aot.png);
        background-size: cover;
        background-position: center;
        overflow: hidden;
        h3{
            margin-top: 100px;
            text-align: center;
            font-size: 30px;
            color: #404258;
        }

        .button{
            height: 50px;
            width: 150px;
            border-radius: 5px;
            margin-top: 250px;
            margin-right: 100px;
            margin-left: auto;
            text-align: center;
            background-color: #F2A154;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #3F3B6C;
            font-size: 20px;
            font-weight: 600;
            user-select: none;
            cursor: pointer;
            position: relative;
            svg{
                width: 25px;
                height: 25px;
                position: relative;
                z-index: 1;
                fill: #A10035;
            }
            span{
                position: relative;
                z-index: 1;
            }
            &:hover{
                svg{
                    animation: AOT 1s infinite linear;
                }
            }

            &:hover::after{
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after{
                content: '';
                display: block;
                background-color: #FAC213;
                position: absolute;
                width: 0%;
                height: 0%;
                top: 50%;
                left: 50%;
                border-radius: 5px;
                z-index: 0;
                transition: all 0.5s;
            }
        }
    }
    // 魁拔
    .kuiBa{
        margin-top: 20px;
        margin-bottom: 100px;
        height: 500px;
        background-image: url(../img/home/kuiBa.jpeg);
        background-size: cover;
        background-position: center;
        overflow: hidden;

        h3{
            margin-top: 100px;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }

        .button{
            height: 50px;
            width: 150px;
            border-radius: 5px;
            margin-top: 250px;
            margin-right: 100px;
            margin-left: auto;
            text-align: center;
            background-color: #624F82;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            user-select: none;
            cursor: pointer;
            position: relative;
            svg{
                width: 25px;
                height: 25px;
                position: relative;
                z-index: 1;
                fill: #FFF323;
            }
            span{
                position: relative;
                z-index: 1;
            }
            &:hover{
                svg{
                    animation: kuiBa 1s infinite linear;
                }
            }

            &:hover::after{
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after{
                content: '';
                display: block;
                background-color: #3F3B6C;
                position: absolute;
                width: 0%;
                height: 0%;
                top: 50%;
                left: 50%;
                border-radius: 5px;
                z-index: 0;
                transition: all 0.5s;
            }
        }
    }
}

footer{
    overflow: hidden;
    background-color: var(--navcolor);
    padding: 50px 10vw;
    color: var(--aboutcolor);

    &>h3{
        font-size: 30px;
        margin: 50px 0;
    }

    .container{
        height: 200px;
        display: flex;
        justify-content: space-between;

        &>div{
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .openSource{
            a{  
                color: var(--aboutcolor);
                &:hover{
                    color: #E26868;
                }
            }
        }
    }
}
// 移动适配
@media screen and(max-width:760px){
    body{
        header{
            padding: 0 5vw;
            .nav{
                position: absolute;
                display: block;
                width: calc(10vw + 40px);
                top: 60px;
                right: 0;
                text-align: center;
                background-color: #3F3B6C;
                height: 0;
                overflow: hidden;
                transition: height 1s;
                
                &>div{
                    height: 50px;
                    line-height: 50px;
                    // overflow: hidden;

                    &:hover{
                        background-color: #624F82;
                    }
                }
            }

            .navButton{
                display: block;
                right: 5vw;
                overflow: hidden;
            }

            // 按钮激活样式
    .buttonActive{
        border: solid #E0144C 3px;
        background-color: #fff;
    
        .lineOne{
            transform: translateY(0px) rotate(45deg);
            background-color: #E0144C;
        }
    
        .lineTwo{
            transform: translateX(40px);
            opacity: 0;
            background-color: #E0144C;
        }
    
        .lineThree{
            transform: translateY(0px) rotate(-45deg);
            background-color: #E0144C;
        }
    
        & + .nav{
            height: 300px;
        }
    }
        }
        main{
            .sekiro{
                .button{
                    margin-top: 290px;
                    margin-right: auto;
                }
            }
            .AOT{
                .button{
                    margin-top: 290px;
                    margin-right: auto;
                }
            }
            .kuiBa{
                .button{
                    margin-top: 290px;
                    margin-right: auto;
                }
            }
        }
    }
}

// 设置动画
@keyframes sekiro {
    form{transform: rotateY(0deg);}
    to{transform: rotateY(360deg);}
}

@keyframes AOT {
    0%{transform: translateY(0);}
    25%{transform: translateY(-5px);}
    50%{transform: translateY(0);}
    75%{transform: translateY(5px);}
    100%{transform: translateY(0);}
}
@keyframes kuiBa {
    form{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}